<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜂窝煤登录界面</title>
<script type="text/javascript"src="js/jquery.min.js"></script>
<script  >
    function login(){
    	return checkid()&&checkpwd();
    }
	function checkid(){
		var userid1=$("#myuserid").val();
		if(userid1==""||userid1==null){
			$("#lab1").html("<font color='red' size='2'>×用户名不能为空</font>");
				return false;
		}
		else if(userid1.length>6){
		$("#lab1").html("<font color='red' size='2'>×用户名长度不能大于6位</font>");
				return false;
	}else{
		$("#lab1").html(" ");
				return true;	
			}
	}
	function checkpwd(){
		var userpwd1=$("#myuserpwd").val();
			if(userpwd1==""||userpwd1==null){
			    $("#lab2").html("<font color='red' size='2'>×密码不能为空</font>");
			    return false;
			}
			else if(userpwd1.length<6){
				 $("#lab2").html("<font color='red' size='2'>×密码长度不能小于6位</font>");
				 return false;
			}else if(userpwd1.length>16){
				$("#lab2").html("<font color='red' size='2'>×密码长度不能大于16位</font>")
				return false;
			}else{
			 $("#pwdlab").html(" ");
				 return true;
				}
	}
</script>
<style type="text/css">
 .labstyle1{
    	position: absolute; margin-left: 50px; margin-top: 150px; 
    }
    .labstyle2{
    	position: absolute; margin-left: 50px; margin-top: 40px;
    }
	.form-bg{
		padding: 2em 0;
	}
	.myre{
	color: white;
	}
	#login-change{
		margin-left:830px;
		color:white;
		font-size: medium;
		margin-top: 95px;
		
	}
	#forget{
	margin-left:835px;
	color:white;
	font-size: medium;
	margin-top: 250px;
		}
	#register{
	margin-left:835px;
	color:white;
	font-size: medium;
	margin-top: 175px;
		}
	.form-horizontal{
		background: #fff;
		padding-bottom: 40px;
		border-radius: 15px;
		text-align: center;
	}
	.form-horizontal .heading{
		display: block;
		font-size: 35px;
		font-weight: 700;
		padding: 35px 0;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 30px;
	}
	.form-horizontal .form-group{
		padding: 0 40px;
		margin: 0 0 25px 0;
		position: relative;
	}
	.form-horizontal .form-control{
		background: #f0f0f0;
		border: none;
		border-radius: 20px;
		box-shadow: none;
		padding: 0 20px 0 45px;
		height: 40px;
		transition: all 0.3s ease 0s;
		margin-top: 115px;
	}
	.form-horizontal .form-control2{
		background: #f0f0f0;
		border: none;
		border-radius: 20px;
		box-shadow: none;
		padding: 0 20px 0 45px;
		height: 40px;
		transition: all 0.3s ease 0s;
		margin-top: 10px;
	}
	.login-uesr{
		margin-top: 20px;
		margin-left: 640px;
		color: white;
	}
	.form-horizontal .form-control:focus{
		background: #e0e0e0;
		box-shadow: none;
		outline: 0 none;
	}
	.form-horizontal .form-group i{
		position: absolute;
		top: 12px;
		left: 60px;
		font-size: 17px;
		color: #c8c8c8;
		transition : all 0.5s ease 0s;
	}
	.form-horizontal .form-control:focus + i{
		color: #00b4ef;
	}
	.form-horizontal .fa-question-circle{
		display: inline-block;
		position: absolute;
		top: 12px;
		right: 60px;
		font-size: 20px;
		color: #808080;
		transition: all 0.5s ease 0s;
	}
	.form-horizontal .fa-question-circle:hover{
		color: #000;
	}
	.form-horizontal .main-checkbox{
		float: left;
		width: 20px;
		height: 20px;
		background: #11a3fc;
		border-radius: 50%;
		position: relative;
		margin: 5px 0 0 5px;
		border: 1px solid #11a3fc;

	}
	.form-horizontal .main-checkbox label{
		width: 20px;
		height: 20px;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
	}
	.form-horizontal .form-group{
        margin-left: 510px;
        margin-right: 510px;
	}
	.form-horizontal .main-checkbox label:after{
		content: "";
		width: 10px;
		height: 5px;
		position: absolute;
		top: 5px;
		left: 4px;
		border: 3px solid #fff;
		border-top: none;
		border-right: none;
		background: transparent;
		opacity: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.form-horizontal .main-checkbox input[type=checkbox]{
		visibility: hidden;
		margin: 50px;
	}
	.form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{
		opacity: 1;
	}
	.form-horizontal .text{
		float: left;
		margin-left: 7px;
		line-height: 20px;
		padding-top: 5px;
		text-transform: capitalize;
	}
	.form-horizontal .btn{
		float: right;
		font-size: 14px;
		color: #fff;
		background: #00b4ef;
		border-radius: 30px;
		padding: 10px 25px;
		border: none;
		text-transform: capitalize;
		transition: all 0.5s ease 0s;
	}
	@media only screen and (max-width: 479px){
		.form-horizontal .form-group{
			padding: 0 25px;
		}
		.form-horizontal .form-group i{
			left: 45px;
		}
		.form-horizontal .btn{
			padding: 10px 20px;
		}
	}
</style>
</head>
<body  ><script src="/demos/googlegg.js"></script>
	<div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%" style="z-index: 20;" >
		<img src="image/user/login1.jpg" width="100%" height="100%"/>
	</div>
	<a href="login.jsp" style="z-index: 100; position: absolute; text-decoration: none;" id="login-change">用户登录</a>
	<a href="sellerregister.jsp" style="z-index: 100; position: absolute; text-decoration: none;" id="register">商家注册</a>
	<a href="sellerlogin.jsp" style="z-index: 100; position: absolute; text-decoration: none;" id="forget">忘记密码</a>
<div class="demo form-bg">
	<div class="container">
		<div class="row">
			<div class="col-md-offset-3 col-md-6">
				<form class="form-horizontal" action="SellerServlet?flag=sellerlogin" method="post" >
				<div class="login-uesr"><span class="heading" style="z-index: 1000; position: absolute; text-decoration: none;">商家登录</span></div>
					<div class="form-group" >
						<input class="form-control" name="sellerid" placeholder="商家ID"   onblur="checkid()" id="myuserid" type="number">
						<i id="lab1" class="labstyle1"></i>
					</div>
					<div class="form-group help">
						<input type="password" class="form-control2" name="sellerpwd" placeholder="密码" onblur="checkpwd()" id="myuserpwd">
						<i id="lab2" class="labstyle2"></i>
					</div>
					<div class="form-group" >
						<div class="main-checkbox">
							<input type="checkbox" value="None" id="checkbox1" name="check"/>
							<label for="checkbox1"></label>
						</div>
						
						<div class="myre"><span class="text">记住我</span></div>
						<button type="submit" class="btn btn-default"  onclick="return login()">立刻登录</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<div id="footer" style="position: absolute; margin-left: 500px; margin-top: 300px;font-size: 13px;">
        <p>
            <span><a href="#">Copyright</a> © 2018 FengWoMei.cn <a href="index.jsp" target="_blank" title="蜂窝煤之家">蜂窝煤之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">Internet</a></span>
        </p>
        <p align="center">
            <span>All Rights Reserved.</span></p>
        <div class="clearfix">
        </div>
    </div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>
</body>
</html>